<template>
	<div v-loading="loading">
		<!--卷挂载-->
		
		<el-alert
	    title="可以用于持久化及共享数据并与独立容器的生命周期分离。"
	    type="info">
	  </el-alert>
		
		<addListTableBySlot
			ref="addListTableBySlot"
			:data="formData" :options="options" @change="changeConfig">
			
			<template slot="defaultValueSlot" slot-scope="{scope}">
				<el-input 
					:disabled="!!(scope.row.envCode)"
					@change="(v)=>{scope.row.varsValue=scope.row.defaultValue=v;scope._self.emitDataChange()}"
					v-model="scope.row.defaultValue" 
					type="text"
					></el-input>
			</template> 
			
		</addListTableBySlot>
		
		
	</div>
</template>

<script>
	import addListTableBySlot from "@/view/components/table/addListTableBySlot";
	import baseSelect from "@/view/components/select/select";
	import {getEnvs} from "@/service/swagger/EnvsController"
	
export default {
	props: [
		"readOnly", // 是否可编辑
		//"defaultValue", // 
		"autoAddList",
	],
	components: {
		baseSelect,
		addListTableBySlot,
	},
	data() {
		return {
			loading : false,
			formData : [],
			
			options: {
				autoAddList : this.autoAddList ,
				editDisabled: false,
				header: [{
					label: "容器挂载目录",
					align: "left",
					propName: "defaultValue",
					slotName:"defaultValueSlot",
				},],
				defaultNewRow: {
					defaultValue: "",
					varsValue: "",
					// description: "",
					// envCode: "PORT_MAPPING",
					// envType: "", // varsType
					// envName: "", // varsName
					// varsName : "",
					varsType: "4",
					// nullAble: 0,
				}
			},
		}
	},
	mounted() {
		
	},
	methods: {
		init(options){
			let params = {
				deployType : options.deployType ,
				deployModel : options.deployModel,
				appType : options.appType,
			}
			getEnvs(params).then(ret=>{
				if(!ret.code){
					this.initData(ret.data)
				}
			})
		},
		
		initData(data){
			let arr = [];
			data.forEach(el=>{
				if(el.envType==4||el.varsType==4){
					arr.push({
						defaultValue : el.defaultValue || "",
						varsValue : el.defaultValue || "",
						varsName : el.varsName || el.envName || "",
						envCode : el.envCode || "",
						nullAble : el.nullAble || 0,
						description : el.description || "",
						varsType: "4",
					})
				}
			})
			this.formData = arr ;
			this.$refs.addListTableBySlot.initListData(this.formData)
		},
		
		changeConfig(name, v) {
			console.log( "自定义 添加编辑 列表数据变更", name, v) 
			this.formData = v ;
			this.emitChange();
		}, 
		
		emitChange(){
			this.$emit("change","volume", this.formData , this.deployModelList )
		},
		
		
	}

}
</script>

<style>
</style>